import React from 'react'

const Comment = () => {
    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    const [rate, setRate] = React.useState(0)

    const [searchParams, setSearchParams] = React.$Router.useSearchParams()

    const [id, setId] = React.useState(searchParams.get('id'))

    const [orderData, setOrderData] = React.useState({})

    const onBack = () => {
        navigate(-1)
    }

    React.useEffect(() => {
        getComData()
    }, [])

    const getComData = async () => {
        let result = await React.$Api.ComData({ id });

        if (result.code === 1) {
            setOrderData(result.data);
        } else {
            React.$Vant.Toast({
                type: 'fail',
                message: result.msg,
                onClose: () => {
                    navigate(-1)
                }
            })
        }
    }

    const onSumbit = async (values) => {
        let rate = values.rate
        let comment = values.comment

        let data = {
            id,
            rate,
            comment
        }

        let result = await React.$Api.comment(data);

        if (result.code === 1) {
            React.$Vant.Toast({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    navigate('/order/order/index')
                }
            })
        } else {
            React.$Vant.Toast.fail(result.msg)
        }
    }

    return (
        <>
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='商品评价'
                    leftText='返回'
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <div className="zy_module_content">
                <div className="swiper-container vip_user_order">
                    <div className="swiper-slide">
                        <ul>
                            <li style={{ borderBottom: 'none' }}>
                                <div className="vip_order_goods">
                                    <h3>
                                        <React.$Router.NavLink to={`/product/product/info?pid=`}>
                                            <i><img src={orderData.product && orderData.product.thumb_cdn} /></i>
                                            <dl>
                                                <dd>
                                                    <em>订单：</em>
                                                    <em></em>
                                                </dd>
                                                <dd>
                                                    <em>商品名称：</em>
                                                    <em>{orderData.product && orderData.product.name}</em>
                                                </dd>
                                                <dd>
                                                    <em>订单价格：</em>
                                                    <em>{orderData.price}</em>
                                                </dd>
                                            </dl>
                                        </React.$Router.NavLink>
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div className='comment'>
                <React.$Vant.Form onFinish={onSumbit}>
                    <React.$Vant.Form.Item
                        label='评分'
                        name='rate'
                        colon
                        labelWidth='3em'
                        rules={[
                            { required: true, message: '请先评分' }
                        ]}
                    >
                        <React.$Vant.Rate value={rate} onChange={setRate} />
                    </React.$Vant.Form.Item>

                    <React.$Vant.Form.Item
                        label='评价'
                        name='comment'
                        colon
                        labelWidth='3em'
                        rules={[
                            { required: true, message: '请填写评价' }
                        ]}
                    >
                        <React.$Vant.Input.TextArea rows={3} autoSize maxLength={140} showWordLimit />
                    </React.$Vant.Form.Item>

                    <div style={{ width: '90%', margin: '10px auto' }}>
                        <React.$Vant.Button nativeType="submit" block size="normal" type="primary">提交</React.$Vant.Button>
                    </div>
                </React.$Vant.Form>
            </div>
        </>
    )
}

export default Comment